<template>
  <div>
    <a-modal
      title="Title"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div v-show="!editData.id">
        <label>用户名：</label>
        <a-auto-complete
          v-model="editData.username"
          style="width: 200px"
          placeholder="input here"
        />
      </div>

      <div v-show="editData.id">
        <label>用户名：</label>
        <a-auto-complete
          :disabled="true"
          :readOnly="true"
          v-model="editData.username"
          style="width: 200px"
          placeholder="input here"
        />
      </div>

      <div v-show="!editData.id">
        <label>密码：</label>
        <a-auto-complete
          v-model="editData.password"
          style="width: 200px"
          placeholder="input here"
        />
      </div>

      <div>
        <label>手机号：</label>
        <a-auto-complete
          v-model="editData.mobile"
          style="width: 200px"
          placeholder="input here"
        />
      </div>

      <div>
        <label>邮箱：</label>
        <a-auto-complete
          v-model="editData.email"
          style="width: 200px"
          placeholder="input here"
        />
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  },
  props:['visible','editData'],
  methods: {
    // 弹出框点击确认时调用此函数
    handleOk(e) {
      this.$emit('update:visible', false)
      this.$emit('requestAdd')
    },

    // 弹出框点击取消时调用此函数
    handleCancel(e) {
      this.$emit('update:visible', false)
    },
  },
};
</script>
